<template>
    <div class="login">
        <el-row>
            <el-col :span="6" :offset="8">
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" type="password"></el-input>
                    </el-form-item>
                    <el-form-item style="text-align: center">
                        <el-button type="primary" @click="handleLogin()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script>

    export default {
        name: "login",
        data() {
            return {
                form: {
                    /*username: null,
                    password: null*/
                    username: 'zhangsan',
                    password: '123456'
                }
            }
        },
        methods: {
            handleLogin() {
                this.$store.dispatch('user/login', this.form).then(() => {
                    this.$message({
                        message: '登录成功',
                        type: 'success'
                    });
                    this.$store.dispatch('user/getInfo').then(res => {
                        this.$store.dispatch('user/getNettyServerAddr').then(() =>{
                            this.$nextTick(function () {
                                this.$router.push('/home');
                            })
                        })
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .login {
        padding-top: 150px;
    }

</style>